function $(option) {
    var ele = document.querySelectorAll(option);

    if (ele.length == 1) {
        return ele[0];
    } else {
        return ele;
    }
}

function addEvent(element, type, fn, isCapture) {
    isCapture = isCapture ? true : false;
    // w3c标准浏览七 或 IE8以上版本的浏览器 绑定事件
    if (window.addEventListener) {
        element.addEventListener(type, fn, isCapture)
    }
    // IE8以下版本的浏览器 绑定事件
    else {
        // IE8以下版本的浏览器 只有冒泡触发
        element.attachEvent('on' + type, fn);
    }
}

// 获取 开始游戏 按钮
var begin = $('.begin');
// 获取 开始游戏界面元素
var plane = $('.plane');

// 获取 游戏进行界面元素
var game = $('#game');
// 获取 背景元素
var bg = $('.bg')
// 获取我方飞机的元素
var myplane = $('.myplane')
var bg2 = $(".bg2")

// 获取游戏主界面元素 计算之后的样式
var planeStyle = getComputedStyle(plane);
// 获取游戏主界面宽度
var planeWidth = parseInt(planeStyle.width);
// 获取游戏主界面高度
var planeHeight = parseInt(planeStyle.height);

// 获取我方飞机元素 计算之后的样式
var myplaneStyle = getComputedStyle(myplane);
// 获取我方飞机的宽度
var myplaneWidth = parseInt(myplaneStyle.width);
// 获取我方飞机的高度
var myplaneHeight = parseInt(myplaneStyle.height);

bg2.style.top = -planeHeight + 'px';

// 边界控制， 飞机所能达到的最大left值(页面宽度-飞机宽度)
var MAX_left = planeWidth - myplaneWidth;
// 边界控制， 飞机所能达到的最大top值(页面高度-飞机高度)
var MAX_top = planeHeight - myplaneHeight;

// 定时器
// 背景
var movebgTimer = null;
// 子弹
var bulletTimer = null;
// 移动子弹
var moveBulletTimer = null;
//  敌方飞机
var enemyPlaneTimer = null;
//  移动敌方飞机
var moveEnemyPlaneTimer = null;

function fn() {
    // 显示游戏进行界面
    game.style.display = 'block'
    //  用定时器 让背景移动的逻辑
    movebgTimer = setInterval(() => {
        // 让两个背景同时移动
        for (let i = 0; i < bg.length; i++) {
            // 当前的 每一个背景的 top值
            var currentTop = parseInt(getComputedStyle(bg[i]).top);

            // 每次让背景移动 两个像素
            currentTop += 2;

            // 如果某个 背景的 top 超过游戏界面的高度
            currentTop = currentTop >= planeHeight ? -planeHeight : currentTop;
            // 移动背景
            bg[i].style.top = currentTop + 'px';
        }
    }, 50);

    // 调用创建子弹实例的方法
    createEveryBullet();
    //  调用创建敌机实例的方法
    createEveryEnemyPlane();

}

// 给开始游戏按钮 绑定点击事件
addEvent(begin, 'click', fn)
// 给整个游戏进行界面 绑定鼠标移动事件
addEvent(game, 'mousemove', fn1)

function fn1(e) {
    // console.log(e.pageX,e.pageY);

    // 游戏进行界面的元素 距离页面左上角的 坐标
    var planeoffsetLeft = plane.offsetLeft;
    var planeoffsetTop = plane.offsetTop;

    // 鼠标在游戏进行界面中的坐标 = 鼠标在整个屏幕中的坐标 - 游戏进行界面的元素 距离页面左上角的 坐标
    var top = e.pageY - planeoffsetTop;
    var left = e.pageX - planeoffsetLeft;
    // console.log(left,top);

    // 我方飞机的left值 = 鼠标坐标 - 我方飞机宽度/2
    left = left - myplaneWidth / 2;
    // 我方飞机的top值 = 鼠标坐标 - 我方飞机高度/2
    top = top - myplaneHeight / 2;

    // 边界控制
    left = left < 0 ? 0 : left > MAX_left ? MAX_left : left;
    top = top < 0 ? 0 : top > MAX_top ? MAX_top : top;

    // 让飞机跟随鼠标移动
    myplane.style.left = left + 'px';
    myplane.style.top = top + 'px';
}

class Bullet {
    constructor(bulletWidth = 5, bulletHeight = 11, bulletX = 0, bulletY = 0, bulletSrc = "./images/bullet1.png") {
        this.bulletWidth = bulletWidth;
        this.bulletHeight = bulletHeight;
        this.bulletX = bulletX;
        this.bulletY = bulletY;
        this.bulletSrc = bulletSrc;
        this.createBullet();
    }
    createBullet() {
        // 创建子弹标签
        this.currentBullet = document.createElement('img')
        // 给图片标签添加src属性
        this.currentBullet.src = this.bulletSrc;
        // 给创建的子弹节点 添加宽高
        this.currentBullet.style.width = this.bulletWidth;
        this.currentBullet.style.height = this.bulletHeight;
        // 每次创建子弹之前都要 获取当前我方飞机的位置
        var myplaneX = parseInt(myplaneStyle.left);
        var myplaneY = parseInt(myplaneStyle.top);
        // console.log(myplaneX,myplaneY);

        // 生成子弹的位置 出现在我方飞机的头部
        this.bulletX = myplaneX + myplaneWidth / 2 - this.bulletWidth / 2 - 1;
        this.bulletY = myplaneY - this.bulletHeight - 10;

        // 设置子弹的位置 出现在我方飞机的头部
        this.currentBullet.style.left = this.bulletX + 'px';
        this.currentBullet.style.top = this.bulletY + 'px';

        // 把每一个创建的子弹节点 都插入到游戏进行页面中
        game.appendChild(this.currentBullet);
        this.moveBullet()

    }
    moveBullet() {

        moveBulletTimer = setInterval(() => {
            // 每次让子弹移动两个像素
            this.bulletY -= 2;
            if (this.bulletY <= -this.bulletHeight && this.currentBullet != null) {
                // 元素.remove() 移除元素
                this.currentBullet.remove();
            } else if (this.currentBullet != null) {
                // 设置子弹移动
                this.currentBullet.style.top = this.bulletY + 'px';
                this.shootEnemyPlane();
            }

        }, 5);

    }

    shootEnemyPlane() {
        //  获取所有的敌机
        for (let i = 0; i < enemyPlanes.length; i++) {
            // 碰撞检测
            if (this.bulletX >= enemyPlanes[i].enemyPlaneX - this.bulletWidth &&
                this.bulletX <= enemyPlanes[i].enemyPlaneX + enemyPlanes[i].enemyPlaneWidth &&
                this.bulletY >= enemyPlanes[i].enemyPlaneY - this.bulletHeight &&
                this.bulletY <= enemyPlanes[i].enemyPlaneY + enemyPlanes[i].enemyPlaneHeight) {
                // 减少敌机血量
                enemyPlanes[i].enemyPlaneBlood -= 1;
                console.log(enemyPlanes[i].enemyPlaneBlood);
                // 元素.remove() 移除子弹元素
                this.currentBullet.remove();
                this.currentBullet = null;
                // 敌机血量为0
                if (enemyPlanes[i].enemyPlaneBlood <= 0) {
                    // 创建敌机爆炸的节点
                    var boomEnemyPlane = document.createElement('img')

                    // 敌机爆炸图的路径
                    boomEnemyPlane.src = enemyPlanes[i].enemyPlaneDieSrc;

                    // 敌机爆炸图的宽高
                    boomEnemyPlane.style.width = enemyPlanes[i].enemyPlaneWidth + 'px';
                    boomEnemyPlane.style.height = enemyPlanes[i].enemyPlaneHeight + 'px';

                    // 敌机爆炸位置
                    boomEnemyPlane.style.position = 'absolute';
                    boomEnemyPlane.style.left = enemyPlanes[i].enemyPlaneX + 'px';
                    boomEnemyPlane.style.top = enemyPlanes[i].enemyPlaneY + 'px';
                    boomEnemyPlane.style.zIndex = 9;
                    // 移除页面中当前节点的 敌机
                    enemyPlanes[i].currentEnemyPlane.remove();
                    enemyPlanes[i].currentEnemyPlane = null;
                    // 移除敌机数组里当前敌机实例
                    enemyPlanes.splice(i, 1);
                    // 把敌机爆炸图插入到页面中
                    game.appendChild(boomEnemyPlane);

                    // 单次定时，隔1S销毁敌机爆炸图
                    setTimeout(() => {
                        boomEnemyPlane.remove();
                    }, 1000);
                }
            }
        }
    }

}



// 创建子弹实例对象的方法
function createEveryBullet() {
    bulletTimer = setInterval(() => {
        // 每300ms 创建一个子弹对象
        new Bullet();

    }, 200);
}



// 不同敌方飞机的数据
var enemy = [
    // 小飞机
    {
        img: './images/enemy1_fly_1.png',
        dieTmg: './images/bz1.gif',
        blood: 1,
        width: 27,
        height: 19,
        speed: 1.5,
    },
    // 中飞机
    {
        img: './images/enemy2_fly_1.png',
        dieTmg: './images/bz2.gif',
        blood: 5,
        width: 51,
        height: 48,
        speed: 1,
    },
    // 大飞机
    {
        img: './images/enemy3_fly_1.png',
        dieTmg: './images/bz3.gif',
        blood: 10,
        width: 68,
        height: 112,
        speed: .5,
    },
]

class EnemyPlane {

    constructor(emy) {
        // 地方飞机的宽度和高度
        this.enemyPlaneWidth = emy.width;
        this.enemyPlaneHeight = emy.height;

        // 敌方飞机出现的坐标
        // 边界控制,敌机所能出现的最大left 
        this.enemyPlaneX = Math.random() * (planeWidth - this.enemyPlaneWidth);
        this.enemyPlaneY = 0 - this.enemyPlaneHeight;

        // 敌机的图片路径
        this.enemyPlaneSrc = emy.img;
        // 敌机爆炸的图片路径
        this.enemyPlaneDieSrc = emy.dieTmg;
        // 敌机血量
        this.enemyPlaneBlood = emy.blood;
        // 敌方飞机在页面上的元素
        this.currentEnemyPlane = null;
        // 敌方飞机在页面上的移动速度
        this.speed = emy.speed

        this.createEnemyPlane();
    }

    createEnemyPlane() {
        // 创建敌方飞机节点
        this.currentEnemyPlane = document.createElement('img');
        // 给敌机添加图片路径
        this.currentEnemyPlane.src = this.enemyPlaneSrc;
        // 设置敌机宽高
        this.currentEnemyPlane.style.width = this.enemyPlaneWidth + 'px';
        this.currentEnemyPlane.style.height = this.enemyPlaneHeight + 'px';


        // 设置敌机的坐标
        this.currentEnemyPlane.style.position = 'absolute';
        this.currentEnemyPlane.style.left = this.enemyPlaneX + 'px';
        this.currentEnemyPlane.style.top = this.enemyPlaneY + 'px';
        this.currentEnemyPlane.style.zIndex = '999';

        game.appendChild(this.currentEnemyPlane);
        this.moveEnemyPlane();
    }

    moveEnemyPlane() {
        moveEnemyPlaneTimer = setInterval(() => {
            // 敌方每次移动两个像素
            this.enemyPlaneY += this.speed;
            // 如果敌机飞到屏幕之外
            if (this.enemyPlaneY > planeHeight) {
                // 移除页面中的敌机
                this.currentEnemyPlane.remove();
            } else {
                // 敌机没有飞到屏幕之外
                this.currentEnemyPlane.style.top = this.enemyPlaneY + 'px';
            }

            if (this.currentEnemyPlane != null) {
                var myplaneX = parseInt(myplaneStyle.left);
                var myplaneY = parseInt(myplaneStyle.top);

                if (this.enemyPlaneX >= myplaneX - this.enemyPlaneWidth &&
                    this.enemyPlaneX <= myplaneX + myplaneWidth &&
                    this.enemyPlaneY >= myplaneY - this.enemyPlaneHeight &&
                    this.enemyPlaneY <= myplaneY + myplaneHeight) {

                    myplane.style.backgroundImage = 'url(./images/本方飞机爆炸.gif)';

                    clearInterval(movebgTimer);
                    clearInterval(bulletTimer);
                    clearInterval(moveBulletTimer);
                    clearInterval(enemyPlaneTimer);
                    clearInterval(moveEnemyPlaneTimer);
                    movebgTimer = null;
                    bulletTimer = null;
                    moveBulletTimer = null;
                    enemyPlaneTimer = null;
                    moveEnemyPlaneTimer = null;

                    game.removeEventListener('mousemove', fn1);
                    setTimeout(() => {
                        history.go(0)
                    }, 2000);
                }

            }
        }, 10);

    }

}

var enemyPlanes = [];

function createEveryEnemyPlane() {
    enemyPlaneTimer = setInterval(() => {
        var emy = null;
        // [0 - 0.6)   小飞机
        // [0.6 - 0.9) 中飞机
        // [0.9 - 1)   大飞机

        var random = Math.random();
        if (random < 0.7) {
            // 小飞机
            emy = enemy[0];
        } else if (random < 0.9) {
            // 中飞机
            emy = enemy[1];
        } else {
            // 大飞机
            emy = enemy[2];
        }
        // 创建每一架飞机的实例
        var enemyPlane = new EnemyPlane(emy);

        // 把每一架飞机 存储到数组里
        enemyPlanes.push(enemyPlane);
    }, 1000);
}